import { Component, OnInit } from '@angular/core';
import { HomeService } from './home.service';

@Component({
  selector: 'app-home',
  styleUrls: ['./home.component.css'],
  templateUrl: './home.component.html',
})
export class HomeComponent implements OnInit {
  backgroundImageUrl: string = '';
  backgroundImageAll: string[] = [];
  hideBackgroundImage: boolean = false;

  order: number = 0;
  endCount = 1;
  constructor(public homeService: HomeService) {}

  handleTransEnd(e: TransitionEvent) {
    e.preventDefault();
    console.log(e.propertyName, 'end');
    this.endCount++;
    if (this.endCount === 2) {
      this.endCount = 0;
      this.carousel();
    }
  }

  carousel() {
    this.hideBackgroundImage = false;
    this.backgroundImageUrl = `url("${
      this.backgroundImageAll[this.order++ % this.backgroundImageAll.length]
    }")`;
    setTimeout(() => {
      this.hideBackgroundImage = true;
    }, 5000);
  }

  ngOnInit(): void {
    this.homeService.getBackgroundImages().subscribe((val) => {
      if (val.length === 1) {
        this.backgroundImageUrl = `url('${val[0]}')`;
      } else if (val.length > 1) {
        this.backgroundImageAll = val;
        this.carousel();
      }
    });
  }
}
